<template>
    <div class="index">
        <common-header></common-header>
        <m-header></m-header>
        <main>
            <common-banner :banner="banner"></common-banner>
            <div class="con_box">
                <ul class="tab2_list">
                    <li class="tab2_item">
                        <a href="#/work">
                            <div class="tab2_info">
                                <div class="tab2_name">双带头工作室</div>
                                <div class="en_name">
                                    <pre>Studio</pre>
                                </div>
                            </div>
                            <div class="tab2_img">
                                <img src="/static/images/tab1_active.png" alt="" class="show"> 
                                <img src="/static/images/tab1.png" alt="" class="none">
                            </div>
                        </a>
                    </li>
                    <li class="tab2_item">
                        <a href="#/manage">
                            <div class="tab2_info">
                                <div class="tab2_name">实绩管理</div>
                                <div class="en_name">
                                    <pre>Manage</pre>
                                </div>
                            </div>
                            <div class="tab2_img">
                                <img src="/static/images/tab2_active.png" alt="" class="show"> 
                                <img src="/static/images/tab2.png" alt="" class="none">
                            </div>
                        </a>
                    </li>
                    <li class="tab2_item">
                        <a href="#/display">
                            <div class="tab2_info">
                                <div class="tab2_name">VR党建展厅</div>
                                <div class="en_name">
                                    <pre>Hall</pre>
                                </div>
                            </div>
                            <div class="tab2_img">
                                <img src="/static/images/tab3_active.png" alt="" class="show"> 
                                <img src="/static/images/tab3.png" alt="" class="none">
                            </div>
                        </a>
                    </li>
                    <li class="tab2_item">
                        <a href="#/space">
                            <div class="tab2_info">
                                <div class="tab2_name">创客空间</div>
                                <div class="en_name">
                                    <pre>Space</pre>
                                </div>
                            </div>
                            <div class="tab2_img">
                                <img src="/static/images/tab4_active.png" alt="" class="show"> 
                                <img src="/static/images/tab4.png" alt="" class="none">
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="news_container">
                    <div class="news_title">
                        <div class="title" style="background:url(/static/images/title_bg.png) no-repeat center center;background-size: 100% 100%;">
                            双带头工作室
                        </div>
                    </div>
                    <ul class="modal_list">
                        <li class="modal_item">
                            <common-list :type="1" :name="'最新公告'" :url="'#/work/notice'" :sort="1"></common-list>
                        </li>
                        <li class="modal_item">
                            <new-banner :name="'双带头工作室轮播图'"></new-banner>
                        </li>
                        <li class="modal_item">
                            <common-list :type="2" :name="'理论学习'" :url="'#/work/study'" :sort="1"></common-list>
                        </li>
                        <li class="modal_item">
                            <common-list :type="2" :name="'工作动态'" :url="'#/work/active'" :sort="1"></common-list>
                        </li>
                        <li class="modal_item">
                            <common-list :type="2" :name="'成果展示'" :url="'#/work/display'" :sort="1"></common-list>
                        </li>
                        <li class="modal_item">
                            <common-list :type="2" :name="'榜样力量'" :url="'#/work/example'" :sort="1"></common-list>
                        </li>
                    </ul>
                    <div class="ad_img" v-if="dj_ad">
                        <a :href="dj_ad.link">
                            <img :src="dj_ad.url" alt="">
                        </a>
                    </div>
                </div>           
            </div>
            <div class="news_container vr" style="background:url(/static/images/vr_bg.png) no-repeat center center;background-size: 100% 100%;">
                    <div class="news_title">
                        <div class="title" style="background:url(/static/images/title_bg2.png) no-repeat center center">
                            VR党建展厅
                        </div>
                    </div>
                    <div class="con_box">
                        <vr-banner></vr-banner>
                    </div>
            </div>  
            <div class="con_box">
                <div class="news_container">
                    <div class="news_title">
                        <div class="title" style="background:url(/static/images/title_bg.png) no-repeat center center">
                            创客空间
                        </div>
                    </div>
                    <ul class="modal_list">
                        <li class="modal_item">
                            <common-list :type="1" :name="'创客集市'" :url="'#/space/cmarket'" :sort="2"></common-list>
                        </li>
                        <li class="modal_item">
                            <new-banner :name="'创客集市'"></new-banner>
                        </li>
                        <li class="modal_item">
                            <new-banner :name="'创客社区'"></new-banner>
                        </li>
                        <li class="modal_item">
                            <common-list :type="1" :name="'创客社区'" :url="'#/space/community'" :sort="2"></common-list>
                        </li>
                        <li class="modal_item">
                            <common-list :type="1" :name="'分享空间'" :url="'#/space/share'" :sort="2"></common-list>
                        </li>
                        <li class="modal_item">
                            <new-banner :name="'分享空间'"></new-banner>
                        </li>
                    </ul>
                    <div class="ad_img" v-if="ck_ad">
                        <a :href="ck_ad.link">
                            <img :src="ck_ad.url" alt="">
                        </a>
                    </div>
                </div>  
            </div>
        </main>
        <common-footer></common-footer>
    </div>
</template>
<script>
    import CommonHeader from '@/components/commonheader'
    import mHeader from '@/components/mobilenav'
    import CommonFooter from '@/components/commonfooter'
    import CommonBanner from '@/components/commonBanner'
    import CommonList from '@/components/commonList'
    import NewBanner from '@/components/newsBanner'
    import VrBanner from '@/components/vrSwiper'
    export default {
        data() {
            return {
                property: 'value',
                banner:[],
                artlist:[],
                dj_ad:null,
                ck_ad:null,
                ismobile:false,
                wid:''
            };
        },
        created(){
            this.wid = document.body.clientWidth
            if(this.wid<900){
            this.ismobile = true
            this.getmobile()
            }else{
                this.getdata()
                this.ismobile = false
            }
        },
        mounted(){
            this.getdata2('双带头工作室广告')
            this.getdata2('创客空间广告')
        },
        watch:{
            
        },
        methods:{
            getdata(){
                this.$api.post('getAdList',{
                    "sort":"sort",
                    "limit":100, 
                    "group":"首页轮播图" 
                }).then(res=>{
                    this.banner = res.data.list
                })
            },
            getmobile(){
                this.$api.post('getAdList',{
                    "sort":"sort",
                    "limit":100, 
                    "group":"首页轮播图手机端" 
                }).then(res=>{
                    this.banner = res.data.list
                })
            },
            getdata2(name){
                this.$api.post('getAdList',{
                    "sort":"sort",
                    "limit":100, 
                    "group":name 
                }).then(res=>{
                    if(name=='双带头工作室广告'){
                        this.dj_ad = res.data.list[0]
                    }else{
                        this.ck_ad = res.data.list[0]
                    }
                })
            },
           
        },
        components:{
            CommonHeader,
            CommonFooter,
            CommonBanner,
            CommonList,
            NewBanner,
            VrBanner,
            mHeader
        }
    }
</script>
<style lang="scss">
@import  '@/assets/css/common.scss';
@media screen and (max-width: 900px){
    .index{
        padding-bottom: 1.2rem;
    }
}
</style>